<template>
  <view>
    <!-- 		<view class="topArea flex" style="">
			<view class="flex flex-al-c">
				<image src="../../../static/img/child-plan.png" mode="aspectFit"
					style="width: 50upx;height: 50upx;"></image>
				<view style="font-size: 38upx;">老年人健康计划</view>
			</view>
			<view style="height: 40upx;"></view>
			<view style="font-size: 22upx;">
				当前所在社区：{{config.globalData.community.deptName}}
			</view>
		</view> -->
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper
          activeColor="#18C7E2"
          inactive-color="#717171"
          ref="tabs"
          height="120"
          bar-width="60"
          :list="listtitle"
          :current="current"
          @change="change"
          class="bd"
          :is-scroll="false"
          swiperWidth="750"
          font-size="32"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item bd t1">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view class="c-list">
              <view>
                <view
                  class="u-item"
                  style="padding: 30upx"
                  v-for="(v, index) in orderList"
                  :key="index"
                >
                  <view class="flex flex-j-b">
                    <!-- <view style="font-size: 30upx;font-weight: 900;">{{v.planName}}</view> -->
                    <view
                      class="flex"
                      style="font-size: 30upx; font-weight: 900"
                    >
                      <view @click="goDetial(v)">{{ v.planName }}</view>
                      <image
                        src="../../../static/img/148d4d3772284677b5d871a58aedcd49.png"
                        mode="widthFix"
                        style="width: 70upx; margin-left: 20upx"
                        @click="goTips(v)"
                        v-show="v.tips"
                      ></image>
                    </view>
                    <view>
                      <u-tag
                        text="预约"
                        type="warning"
                        shape="circle"
                        v-if="v.subscribe"
                        style="background-color: #18c7e1; color: #fff"
                      />
                      <!-- 							<u-tag :text="v.state=='0' || v.state=='1'?'未完成':'已完成'" type="warning" size="mini"
													bg-color="#fff" :color="v.state==2?'#18C7E1':'#F78E3A'" 
													:border-color="v.state==2?'#18C7E1':'#F78E3A'"/> -->
                      <mySwitch
                        :switchList="['未完成', '已完成']"
                        :defaultSwitch="v.checkType == 0 ? true : false"
                        :isShowModal="false"
                        @change="changeSwitch(v)"
                      ></mySwitch>
                      <!-- <u-switch v-model="v.checkType" active-color="#18C7E1" @change="changeSwitch(v)"></u-switch> -->
                    </view>
                  </view>
                  <view
                    v-for="(v1, index1) in v.vaccinesPlans"
                    :key="index1"
                    class="flex flex-j-b flex-al-c item-li uni-item-line"
                  >
                    <view>
                      <view class="">
                        <u-tag
                          :text="v1.type == 1 ? '免费' : '自费'"
                          type="warning"
                          size="mini"
                          bg-color="#fff"
                          :color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                          :border-color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                        />

                        <text
                          style="
                            padding: 0 10upx;
                            display: inline-block;
                            margin-bottom: 20upx;
                          "
                          >{{ v1.vname }}(第{{ v1.num }}/{{ v1.total }}针)</text
                        >
                        <!-- <u-tag v-if="v1.type=='2'" :text="v1.adequate=='2'?'库存充足':'库存不足'" type="error" size="mini" style="background-color: #F7BB3B;color: #fff;" /> -->
                      </view>
                    </view>
                    <view
                      class="flex flex-al-c"
                      style="
                        width: 200upx;
                        font-size: 20upx;
                        justify-content: flex-end;
                      "
                    >
                      <view
                        @click="goDetial(v)"
                        class="iconfont iconarrow-right"
                        style="font-size: 40upx; color: #c3c3c3"
                      ></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item bd t1">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view class="c-list">
              <view
                class="c-item uni-item-line"
                style="
                  padding: 30upx 30upx 20upx 40upx;
                  margin-top: 201`rpx;
                  margin-bottom: 30rpx;
                "
                v-for="(v, index) in tjlist"
                :key="index"
              >
                <view class="flex flex-j-b">
                  <view
                    @click="goTestDetial(v)"
                    class="t1"
                    style="font-size: 34upx; font-weight: 900; color: #444"
                    >{{ v.planName }}</view
                  >
                  <view class="flex">
                    <view>
                      <!-- v.checkType  0 1未完成  2已完成 -->
                      <u-tag
                        text="未完成"
                        v-show="v.checkType == 0"
                        border-color="#F68E3A"
                        type="error"
                        style="
                          background-color: #f68e3a;
                          color: #fff;
                          margin-right: 20upx;
                        "
                      />
                      <u-tag
                        text="已完成"
                        v-show="v.checkType == 1"
                        border-color="#18C7E1"
                        type="error"
                        style="
                          background-color: #18c7e1;
                          color: #fff;
                          margin-right: 20upx;
                        "
                      />
                    </view>
                    <view v-if="false">
                      <!-- v.checkType  0 1未完成  2已完成 -->
                      <u-tag
                        text="未上传"
                        v-show="v.isUpload != 1"
                        border-color="#F68E3A"
                        type="error"
                        style="
                          background-color: #f68e3a;
                          color: #fff;
                          margin-right: 20upx;
                        "
                      />
                      <u-tag
                        text="已上传"
                        v-show="v.isUpload == 1"
                        border-color="#18C7E1"
                        type="error"
                        style="
                          background-color: #18c7e1;
                          color: #fff;
                          margin-right: 20upx;
                        "
                      />
                    </view>

                    <view
                      @click="goTestDetial(v)"
                      class="iconfont iconarrow-right"
                      style="font-size: 40upx; color: #c3c3c3"
                    ></view>
                  </view>
                </view>
                <view style="margin-top: 20upx" v-html="v.planGoal"> </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import mySwitch from "@/components/xuan-switch/xuan-switch.vue";
export default {
  components: {
    mySwitch,
  },
  data() {
    return {
      orderList: [], //疫苗信息数据
      tjlist: [],
      listtitle: [
        {
          name: "接种计划",
        },
        {
          name: "体检计划",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
    };
  },
  onShow() {
    this.yimiaoplan();
    this.tjplan();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    yimiaoplan() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/oldInfo/getPlanListAll", {
          pageNum: 1,
          pageSize: 99,
        })
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            // //console.log(res.data.data.list)
            this.orderList = res.data.data.list;
          } else {
            uni.showToast({
              title: this.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    tjplan() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/oldInfo/getTestList", {
          pageNum: 1,
          pageSize: 99,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            this.tjlist = res.data.data.list;
          } else {
            uni.showToast({
              title: this.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    change(index) {
      this.swiperCurrent = index;
    },
    goTestDetial(v) {
      uni.navigateTo({
        url: "/pages/main/old/test-detial?id=" + v.id,
      });
    },
    goDetial(v) {
      //console.log(v.vaccinesPlans)
      uni.navigateTo({
        url: "/pages/main/old/vaccine-detail?id=" + v.vaccinesPlans[0].vid,
      });
    },
    goTips(v) {
      //去小贴士
      uni.navigateTo({
        url: "/pages/main/pub/little-tips?planId=" + v.id + "&tType=" + "2",
      });
    },
    changeSwitch(v) {
      //console.log(v.checkType)
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/oldInfo/oldInoculationRecord", {
          planId: v.id,
          checkType: v.checkType == 0 ? true : false,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            this.tjplan();
            setTimeout((s) => {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
              });
            }, 500);
          } else {
            uni.showToast({
              title: this.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
  },
};
</script>

<style scoped>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */
</style>

<style lang="scss" scoped>
.uni-item-line::after {
  bottom: -15px;
}

.wrap {
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #f7f7f7;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
  background-color: white;
}

.topArea {
  background-color: #18c7e1;
  color: #fff;
  flex-direction: column;
  align-items: center;
  padding: 40upx 0;
}

// uni-view.u-tabs-box {
// 	border-top: 1px solid #eeeeee;
// 	border-bottom: 1px solid #eeeeee;
// }
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #f7f7f7;
}

.u-tabs-box {
  background-color: #ffffff;
  line-height: 80rpx;
  text-align: center;
  color: #1dc7e0;
  font-size: 36rpx;
}

// tap栏
.down {
  overflow-y: scroll;

  .card {
    background-color: #ffffff;
    padding: 30rpx 10rpx 30rpx 30rpx;
    border-bottom: 1px solid #f2f2f2;

    .infotop {
      margin-bottom: 20rpx;
    }

    .ymname {
      font-size: 32rpx;
      font-weight: bold;
    }

    .ubtn {
      background-color: #1dc7e0;
      border: none;
      color: #ffffff;
      margin-right: 10rpx;
    }

    .u1 {
      background-color: #f68e3a;
    }

    .xinfo {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      color: #a7a7a7;
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }

  .bd1 {
    background-color: #38383c !important;
  }

  .t1 {
    color: #ccc !important;
  }
}
</style>
